<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .map {
      width: 1000px;
      height: 600px;
      border: 5px solid #333;
      margin: 50px auto;
      position: relative;

      background-image: url(./imgs/bg.png);
      background-repeat: repeat;
      background-size: 20px 20px;
    }

    .map > div {
      width: 20px;
      height: 20px;
      position: absolute;
      background-size: 20px 20px;
      background-repeat: no-repeat;
    }

    .map > .food {
      background-image: url(./imgs/food.png);
    }

    .map > .head {
      background-image: url(./imgs/head.png);
    }

    .map > .body {
      background-image: url(./imgs/body.png);
    }

  </style>

</head>
<body>


  <button>开始</button>
  <button>暂停</button>
  <button>重新开始</button>

  <div class="map" id="map"></div>



  <script type="module" src="./game.js"></script>


  <script>
    /*
      贪吃蛇
        + 网页游戏, 一定要分工明确

      食物 类
        => 负责生成一个食物
        => 随机出现在 地图上的 某一个位置
        => 当游戏规则通知我换位置的时候我就换个位置

      蛇 类
        => 负责生成一个蛇
        => 负责走一步, 游戏规则决定每间隔多少时间走一步
        => 判断我的蛇头是否和食物重叠
        => 判断我的蛇头是否出界

      游戏规则 类
        => 通知 食物类 创建一个食物实例在地图上
        => 通知 蛇类 创建一个蛇在地图上

        => 开始游戏: 通知蛇类, 每间隔多少时间走一步
        => 暂停游戏: 暂停通知蛇类
        => 重新开始: 重新走一遍初始化
        => 接受用户的按键信息, 通知蛇类调整方向
    */
  </script>
</body>
</html>
